<template>
  <div>
    <h1>用户管理</h1>
    <el-table :data="tableData" stripe border style="width: 100%">
      <el-table-column prop="id" label="ID">
      </el-table-column>
      <el-table-column prop="username" label="用户名">
      </el-table-column>
      <el-table-column prop="email" label="邮箱">
      </el-table-column>
      <el-table-column prop="phone" label="电话">
      </el-table-column>
      <el-table-column label="创建时间">
        <template slot-scope="scope">
          {{ scope.row.createTime|timer}}
        </template>
      </el-table-column>
    </el-table>
    <!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination> -->
    <my-page :pageSizes="pageSize" :pageNums="pageNum" @changeSize="handleSizeChange" @changeNum="handleCurrentChange" :total="total"></my-page>
  </div>
</template>
<script>
import { getUsers } from "@/utils/API";
import myPage from "@/components/myPage";
export default {
  data() {
    return {
      tableData: [],
      pageSize: 10,
      pageNum: 1,
      total: 0
    };
  },
  components: {
    myPage
  },
  filters: {
    timer(val) {
      var dt = new Date(val);
      var y = dt.getFullYear();
      var m = dt.getMonth() + 1;
      var d = dt.getDate();
      var h = dt.getHours();
      var mi = dt.getMinutes();
      var s = dt.getSeconds();
      s = s < 10 ? "0" + s : s;
      mi = mi < 10 ? "0" + mi : mi;
      h = h < 12 ? "上午" + h : "下午" + h;
      return `${y}/${m}/${d} ${h}:${mi}:${s}`;
    }
  },
  methods: {
    render() {
      getUsers({ pageSize: this.pageSize, pageNum: this.pageNum }).then(res => {
        console.log(res);
        this.tableData = res.list;
        this.total = res.total;
      });
    },
    handleSizeChange(val) {
      console.log(val);
      this.pageSize = val;
      this.render();
    },
    handleCurrentChange(val) {
      console.log(val);
      this.pageNum = val;
      this.render();
    }
  },
  mounted() {
    this.render();
  }
};
</script>
<style lang="scss" scoped>
 h1{
  font-size: 40px;
 }
</style>
